<template>
  <div class="address">
    <div class="top">
      <TopBar :text="text" />
    </div>
    <div v-show="list.length==0" class="conent">
      <img src="https://res.suning.cn/project/msIndex/mobile/address/style/images/public_image_normal_3.png" alt="">
      <h3>您未添加任何地址</h3>
      <button @click="$router.push('/NewAddress')">立即添加</button>
    </div>
    <div class="list">
      <van-address-list v-model="chosenAddressId" :list="list"  
        default-tag-text="默认" @add="onAdd"  @edit="onEdit"  />
    </div>
  </div>
</template>

<script>
import TopBar from '@/components/TopBar.vue'
import { AddRessList, DefaultAddRess } from '@/api/index.js'

export default {
  data() {
    return {
      text: "收货地址",
      chosenAddressId:null,
      list: [],
    }
  },
  components: {
    TopBar
  },
  methods: {
    onAdd() {
      this.$router.push('/NewAddress')
    },
    onEdit(item) {
      // console.log(item);
      this.$router.push({ path: '/NewAddress' ,query:item})
    },
  },
  mounted() {
    var userid = sessionStorage.getItem('userid')
    AddRessList(userid).then((ok) => {
      console.log(ok.data.data)
      this.list = ok.data.data
      // console.log(this.list)
      this.list.forEach((item) => {
        item.id = item.addressid;
        item.address = item.province + item.city + item.county + item.addressDetail
        // console.log(item.id)
      })

    })

    // DefaultAddRess(userid).then((ok) => {
    //   console.log(ok);
    //   this.list.concat()
    // })

  }
}
</script>

<style lang="scss" scoped>
.address{
  .conent{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    img{
      width: 1.45rem;
      height: 1.5rem;
      margin-top: 0.42rem;
      margin-bottom: 0.09rem;
    }
    h3{
      font-size: 0.18rem;
      margin-top: 0.13rem;
    }
    button{
      font-size: 0.15rem;
      color: #666;
      width: 1.2rem;
      height: 0.36rem;
      background: #ffffff;
      border-radius: 0.72rem;
      border: 1px solid #ccc;
      margin-top: 0.48rem;
    }
  }
  .list{
    margin-top: 0.14rem;
    width: 100%;
  }
}
</style>